<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.box {
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
			}
			
			.oDiv2 {
				width: 90px;
				height: 90px;
				border: 5px dashed deeppink;
				position: absolute;
				top: 0;
				left: 0
			}
		</style>
	</head>

	<body>
		<div class="box" id="box">

		</div>
		<script>
			window.onload = function() {
				var oDiv = document.querySelector('div');

				var x = 0;
				var y = 0;
				oDiv.onmousedown = function(ev) {
					var oDiv2 = document.createElement('p');
					oDiv2.className = 'oDiv2';
					oDiv2.style.left = x + 'px';
					oDiv2.style.top = y + 'px';
					document.body.appendChild(oDiv2);
					var ev = ev || event;
					var disX = ev.clientX - oDiv.offsetLeft;
					var disY = ev.clientY - oDiv.offsetTop;
					document.onmousemove = function(ev) {
						var ev = ev || event;
						x = ev.clientX - disX;
						y = ev.clientY - disY;
						oDiv2.style.left = x + 'px';
						oDiv2.style.top = y + 'px';
					};
					document.onmouseup = function() {

						oDiv.style.left = x + 'px';
						oDiv.style.top = y + 'px';
						document.body.removeChild(oDiv2);
						document.onmouseup = null;
						document.onmousemove = null;
					};
					return false;
				};

			};
		</script>
	</body>

</html>